<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选课管理</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>

</head>
<body>
<style>
    .el-input__inner {
        width: 150px;
    }

    #selectionCourse td {
        border: #f2f2f2 1px solid;
        width: 97px;
        height: 30px;
    }
</style>
<div id="app">
    <el-tabs type="border-card">
        <el-tab-pane label="课程管理">
            <div>
                <span style="font-size: 13px">学期名称:</span>
                <template>
                    <el-select v-model="search.term" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in semester" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 授课老师:</span>
                <template>
                    <el-select v-model="search.teacherId" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in teachTeacherName" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 课程名称:</span>
                <template>
                    <input type="text" name="name" v-model:value="search.courseName"
                           style="-webkit-appearance: none;background: #FFF;border-radius: 4px;border: 1px solid #DCDFE6;
            box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 28px;line-height: 35px;
            outline: 0;padding: 0 15px;width: 150px"
                    >
                </template>
                <span style="font-size: 13px">课程状态:</span>
                <el-select v-model="search.state" filterable placeholder="请选择" size="mini">
                    <el-option v-for="item in courseStatus" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" size="mini" @click="manageCourse()">查询</el-button>
                <el-button size="mini" @click="courseReset()">重置</el-button>
                <span style="margin-left: 100px">
    <!--   <el-button
               type="danger"
               @click="deleteHandleManage()"
               :disabled="dataListSelectionsManage.length <= 0"
               size="mini">批量删除</el-button>-->
      <!--  <el-button type="primary" size="mini">导出</el-button>-->
        <el-button type="primary" size="mini" @click="drawer = true" label="rtl">新增课程</el-button>
    </span>
            </div>

            <el-table
                    :data="tableDataCourse"
                    style="width: 100%">
               <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
                <el-table-column
                        label="序号"
                        prop="cid">
                </el-table-column>
                <el-table-column
                        label="学期名称"
                >
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper" v-if="scope.row. term== 1">
                            <el-tag size="medium">上学期</el-tag>
                        </div>
                        <div slot="reference" class="name-wrapper" v-if="scope.row.term == 2">
                            <el-tag size="medium">下学期</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="课程名称"
                        prop="courseName">
                </el-table-column>
                <el-table-column
                        label="授课老师"
                        prop="tname">
                </el-table-column>
                <el-table-column
                        label="上课时间"
                        prop="courseStartTime">
                </el-table-column>
                <el-table-column
                        label="课程管理员"
                        prop="courseAdmin">
                </el-table-column>
                <el-table-column
                        label="报名时间"
                        prop="selectStartTime">
                </el-table-column>
                <el-table-column
                        label="报名人员"
                >
                    学生
                </el-table-column>
                <el-table-column
                        label="课程名额"
                        prop="courseNumber">
                </el-table-column>
                <el-table-column
                        label="报名人数"
                        prop="selectedNumber">
                </el-table-column>
                <el-table-column
                        label="课程状态"
                >
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper" v-if="scope.row.state== 0">
                            <el-tag size="medium">上架</el-tag>
                        </div>
                        <div slot="reference" class="name-wrapper" v-if="scope.row.state == 1">
                            <el-tag size="medium">下架</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="添加时间"
                        prop="createTime">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="takeDownHandleManage(scope.row.cid)">下架
                        </el-button>
                        <el-button
                                size="mini"
                                @click="updateHandleManage(scope.row.cid)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                @click="deleteHandleManage(scope.row.cid)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagination.pageCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.totalCount">
                </el-pagination>
            </div>

            <el-drawer
                    title="添加课程"
                    :before-close="handleClose"
                    :visible.sync="drawer"
                    direction="rtl"
                    custom-class="demo-drawer"
                    ref="drawer"
            >
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="学期名称">
                        <el-select v-model="form.semesterName">
                            <el-option label="上学期" value="1"></el-option>
                            <el-option label="下学期" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报名人数">
                        <el-select v-model="form.SignUpNumber" placeholder="请选择人数">
                            <el-option label="50人" value="50"></el-option>
                            <el-option label="100人" value="100"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程名称">
                        <el-input v-model="form.courseTitle" placeholder="请填写课程名称"></el-input>
                    </el-form-item>
                    <el-form-item label="授课老师">
                        <el-select v-model="form.teacher">
                            <el-option v-for="item in teachTeacherName" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报名时间">
                        <el-col :span="11">
                            <el-time-picker placeholder="请选择开始时间" v-model="form.RegistrationStartTime" style="width: 100%;"></el-time-picker>
                        </el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="请选择结束时间" v-model="form.endOfCourseTime" style="width: 100%;"></el-time-picker>
                        </el-col>
                    </el-form-item>


                    <el-form-item label="课程时间">
                        <el-col :span="11">
                            <el-time-picker placeholder="请选择开始时间" v-model="form.startTime" style="width: 100%;"></el-time-picker>
                        </el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="请选择结束时间" v-model="form.stopTime" style="width: 100%;"></el-time-picker>
                        </el-col>
                    </el-form-item>


                    <el-form-item label="上课时间">
                        <el-col :span="11">
                            <el-select v-model="form.week" placeholder="请选择星期">
                                <el-option label="星期一" value="1"></el-option>
                                <el-option label="星期二" value="2"></el-option>
                                <el-option label="星期三" value="3"></el-option>
                                <el-option label="星期四" value="4"></el-option>
                                <el-option label="星期五" value="5"></el-option>
                                <el-option label="星期六" value="6"></el-option>
                                <el-option label="星期日" value="7"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="11">
                            <el-select v-model="form.class" placeholder="请选择课">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>


                    <el-form-item label="课程管理员">
                        <el-select v-model="form.courseAdministrator">
                            <el-option label="王五" value="wuangwu"></el-option>

                        </el-select>
                    </el-form-item>


                    <el-form-item label="课程名额">
                        <el-input v-model="form.courseQuota" placeholder="请填写课程最大报名名额"></el-input>
                    </el-form-item>


                    <el-form-item label="课程地点">
                        <el-input v-model="form.courseLocation" placeholder="请填写课程地址"></el-input>
                    </el-form-item>

                    <el-form-item label="课程状态">
                        <el-radio-group v-model="form.state">
                            <el-radio label="上架" ></el-radio>
                            <el-radio label="下架"></el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="课程图片">
                        <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="form.dialogVisible">
                            <img width="100%" :src="form.dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>


                    <el-form-item label="课程介绍">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </el-form-item>
                </el-form>


                <div class="demo-drawer__content">
                    <div class="demo-drawer__footer">
                        <el-button @click="cancelForm">取 消</el-button>
                        <el-button type="primary" @click="$refs.drawer.closeDrawer()">确定</el-button>
                    </div>
                </div>
            </el-drawer>


        </el-tab-pane>


<!--        <el-tab-pane label="选课明细">-->
<!--            <div>-->
<!--                <span style="font-size: 13px">学期名称:</span>-->
<!--                <template>-->
<!--                    <el-select v-model="search.semesterName" filterable placeholder="请选择" size="mini">-->
<!--                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </template>-->
<!--                <span style="font-size: 13px"> 授课老师:</span>-->
<!--                <template>-->
<!--                    <el-select v-model="search.tname" filterable placeholder="请选择" size="mini">-->
<!--                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </template>-->
<!--                <span style="font-size: 13px"> 课程名称:</span>-->
<!--                <template>-->
<!--                    <input type="text" name="name" v-model:value="search.courseName"-->
<!--                           style="-webkit-appearance: none;background: #FFF;border-radius: 4px;border: 1px solid #DCDFE6;-->
<!--            box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 28px;line-height: 35px;-->
<!--            outline: 0;padding: 0 15px;width: 150px"-->
<!--                    >-->
<!--                </template>-->
<!--                <span style="font-size: 13px">课程状态:</span>-->
<!--                <el-select v-model="search.state" filterable placeholder="请选择" size="mini">-->
<!--                    <el-option v-for="item in courseStatus" :key="item.value" :label="item.label" :value="item.value">-->
<!--                    </el-option>-->
<!--                </el-select>-->
<!--                <el-button type="primary" size="mini">查询</el-button>-->
<!--                <el-button size="mini" @click="courseReset(search)">重置</el-button>-->
<!--                <span style="margin-left: 100px">-->
<!--    &lt;!&ndash;   <el-button-->
<!--               type="danger"-->
<!--               @click="deleteHandleManage()"-->
<!--               :disabled="dataListSelectionsManage.length <= 0"-->
<!--               size="mini">批量删除</el-button>&ndash;&gt;-->
<!--                    &lt;!&ndash;  <el-button type="primary" size="mini">导出</el-button>&ndash;&gt;-->
<!--        <el-button type="primary" size="mini" @click="drawer = true" label="rtl">新增课程</el-button>-->
<!--    </span>-->
<!--            </div>-->

<!--            <el-table-->
<!--                    :data="tableDataCourseSelection"-->
<!--                    style="width: 100%">-->
<!--                &lt;!&ndash; <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>&ndash;&gt;-->
<!--                <el-table-column-->
<!--                        label="序号"-->
<!--                        prop="cid">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="学期名称"-->
<!--                >-->
<!--                    <template slot-scope="scope">-->
<!--                        <div slot="reference" class="name-wrapper" v-if="scope.row. term== 1">-->
<!--                            <el-tag size="medium">上学期</el-tag>-->
<!--                        </div>-->
<!--                        <div slot="reference" class="name-wrapper" v-if="scope.row.term == 2">-->
<!--                            <el-tag size="medium">下学期</el-tag>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="课程名称"-->
<!--                        prop="courseName">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="授课老师"-->
<!--                        prop="tname">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="上课时间"-->
<!--                        prop="selectStartTime">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="入学年份"-->
<!--                        prop="courseStartTime">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="院系名称"-->
<!--                        prop="deptName">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="学号"-->
<!--                        prop="sno">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="学生姓名"-->
<!--                        prop="sname">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="性别"-->
<!--                >-->
<!--                    <template slot-scope="scope">-->
<!--                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 1">-->
<!--                            <el-tag size="medium">男</el-tag>-->
<!--                        </div>-->
<!--                        <div slot="reference" class="name-wrapper" v-if="scope.row.sex == 0">-->
<!--                            <el-tag size="medium">女</el-tag>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        label="报名时间"-->
<!--                        prop="courseStartTime">-->
<!--                </el-table-column>-->
<!--            </el-table>-->
<!--        </el-tab-pane>-->


<!--        <el-tab-pane label="选课情况">-->
<!--            &lt;!&ndash;           TODO 导航条&ndash;&gt;-->

<!--            <table style="text-align: center;font-size: 13px" cellspacing="0" width="100%" id="selectionCourse">-->
<!--                <tr style="background: #f2f2f2;font-size: 14px;">-->
<!--                    <th rowspan="2">课程</th>-->
<!--                    <th colspan="2">-->
<!--                        星期一-->
<!--                    </th>-->
<!--                    <th colspan="2">-->
<!--                        星期二-->
<!--                    </th>-->
<!--                    <th colspan="2">-->
<!--                        星期三-->
<!--                    </th>-->
<!--                    <th colspan="2">-->
<!--                        星期四-->
<!--                    </th>-->
<!--                    <th colspan="2">-->
<!--                        星期五-->
<!--                    </th>-->
<!--                    <th colspan="2">-->
<!--                        星期六-->
<!--                    </th>-->
<!--                    <th colspan="2">-->
<!--                        星期日-->
<!--                    </th>-->

<!--                </tr>-->
<!--                <tr style="background: #f2f2f2;font-size: 14px">-->
<!--                    <td>班级数</td>-->
<!--                    <td>每班人数</td>-->

<!--                    <td>班级数</td>-->
<!--                    <td>每班人数</td>-->

<!--                    <td>班级数</td>-->
<!--                    <td>每班人数</td>-->

<!--                    <td>班级数</td>-->
<!--                    <td>每班人数</td>-->

<!--                    <td>班级数</td>-->
<!--                    <td>每班人数</td>-->

<!--                    <td>班级数</td>-->
<!--                    <td>每班人数</td>-->

<!--                    <td>班级数</td>-->
<!--                    <td>每班人数</td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <td>定向越野</td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <td>高尔夫</td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <td>花样跳绳</td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                    <td></td>-->
<!--                </tr>-->


<!--            </table>-->
<!--        </el-tab-pane>-->
    </el-tabs>
</div>
</body>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../plugins/echarts/echarts.js"></script>
<script src="../../api/course.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                //课程管理
                tableDataCourse: [],
                //搜索框的学期
                semester: [
                    {value: 1, label: '上学期'},
                    {value: 2, label: '下学期'},

                ],
                //搜索框查询老师姓名
                teachTeacherName:[

                ],
                //表格的上架
                courseStatus:[
                    {value:0,label:"上架"},
                    {value: 1,label: "下架"}
                ],
                value: '',
                drawer: false,
                form: {
                    semesterName: '',
                    SignUpNumber: '',
                    courseTitle: '',
                    teacher: '',
                    RegistrationStartTime: '',
                    endOfCourseTime: '',
                    startTime: '',
                    stopTime: '',
                    week: '',
                    date: '',
                    courseAdministrator: '',
                    courseQuota: '',
                    courseLocation: '',
                    state: '',
                    desc: '',
                    dialogImageUrl: '',
                    dialogVisible: false
                },
                //课程管理分页
                pagination:{
                    currentPage: 1,
                    pageCount: 10,
                    totalCount: 0
                },
                //搜索的数据
                search:{
                    term: '',
                    teacherId:'',
                    courseName:'',
                    state:''
                },
                value:''
            };
        },
        created() {

            this.manageCourse();
            this.selectTeacherName()

        },
        methods: {
            courseReset() {
               this.search.term = ''
               this.search.teacherId = ''
               this.search.courseName = ''
               this.search.state = ''
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.drawer = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => {
                    });
            },
            cancelForm() {
                this.drawer = false;
            },

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            manageCourse(){
                let page = {
                    "currentPage" : this.pagination.currentPage,
                    "pageCount" : this.pagination.pageCount
                };
                courseDatePage(page,this.search).then(respnose => {

                    this.tableDataCourse = respnose.data.data.page.list
                    this.pagination.currentPage = respnose.data.data.page.currentPage
                    this.pagination.totalCount = respnose.data.data.page.totalCount
                    this.pagination.pageCount = respnose.data.data.page.pageCount
                })
            },
            // 更换每页查询数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagination.pageCount = val;
            },
            // 更换页数
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pagination.currentPage = val;
                this.manageCourse();
            },
            //搜索框教师名称
            selectTeacherName(){
                selectionOption().then(response => {
                  this.teachTeacherName = response.data.data.teacherName
                })
            },
            //下架课程
            takeDownHandleManage(id){
                console.log(id)
                takeDownCourse(id).then(response => {
                    this.$message({
                        showClose:true,
                        message:response.data.message,
                        type:'success'
                    })
                    this.manageCourse();
                })
            },

            updateHandleManage(id){

            },
            //删除
            deleteHandleManage(id){
                deleteCourse(id).then(response => {
                    this.$message({
                        showClose:true,
                        message:response.data.message,
                        type:'success'
                    })
                    this.manageCourse();
                })
            }
        },

    })

</script>

</html>